<template>
	<view class="divider">
		<view class="pr">
			<div class="ib_fx aic jcc pr" v-if="type=='normal'">
				<view class="point" :style="[lineStyle()]" v-if="point"></view>
				<view class="width_32 height_2" :style="[lineStyle()]"></view>
				<view class="ml_15 mr_15 fz_14" :style="[textStyle]">{{text||''}}</view>
				<view class="width_32 height_2" :style="[lineStyle()]"></view>
				<view class="point" :style="[lineStyle()]" v-if="point"></view>
			</div>
			<div class="ib_fx aic jcc pr" v-if="type=='red'">
				<view class="width_27 height_2" :style="[lineStyle(1)]"></view>
				<view class="ml_8 mr_8 fz_16 fb" :style="[textStyle]">{{text||''}}</view>
				<view class="width_24 height_2" :style="[lineStyle(2)]"></view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'normal'
			},
			color: {
				type: String,
				default: '#FE0000'
			},
			text: String,
			point: {
				type: Boolean,
				default: true
			},
			lineCustomStyle: {
				type: Object,
				default: () => ({})
			},
			fontCustomStyle: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			lineStyle() {
				return (index) => {
					return {
						background: this.type == 'red' ? index === 1 ?
							'linear-gradient(270deg, #FD2110 0%, rgba(253,33,16,0) 100%)' :
							'linear-gradient(90deg, #FD2110 0%, rgba(253,33,16,0) 100%)' : this
							.color,
						...this.lineCustomStyle
					}
				}

			},
			textStyle() {
				return {
					color: this.type == 'red' ? '#DE202B' : this.color,
					...this.fontCustomStyle
				}
			}
		},
	}
</script>

<style lang="scss">
	.divider {
		.point {
			position: absolute;
			margin: auto 0;
			top: 0;
			bottom: 0;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;

			&:first-of-type {
				left: 54rpx;
			}

			&:last-of-type {
				right: 54rpx;
			}
		}
	}
</style>